\section{HTML基础概念及规则}

\subsection{HTML基本结构}

HTML文件后缀名为“.htm”或“.html”，是一种包含了HTML标记的文本文件，我们通常所说的网页实质上就是HTML文件，HTML的编辑非常简单，学习成本很低，而且所有网页的源代码都可通过浏览器直接查看。正如蒂姆·伯纳斯－李所说：“（互联网）起飞原因在于，全球的人可随意融入参与。”\cite{新华社-2009}

创建网页的方式有很多，我们可以新建一个空白的文本文件，编辑之后保存为后缀名为“.htm”的文件即可。在大多数情况下，我们使用专门的网页编辑软件来编辑网页，如：

\begin{lstlisting}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>文档标题</title>
</head>
<body>
</body>
</html>
\end{lstlisting}

在上面的HTML文件中我们可以看出，HTML文档可以分为文档声明、网页头部分和网页主体部分三部分。

网页头部分指的是<head>和</head>部分，在这个区域一般放置网页相关的内容，比如网页编码方式、关键词、网页内容描述和网页相关联的文件等等。这些包含在<head>和</head>之间的内容一般不会显示在用户的浏览器中。

网页主体部分指的是包含在<body>和</body>之间的部分，这部分内容是显示在浏览器中的内容，大部分HTML的编辑工作都是在主体部分中完成，如图片、文字、超链接等等。

头部分和主体部分又包含在<html>和</html>之中。浏览器会把<html>和</html>之中的内容视为网页。

\subsection{元素及标签}

元素是构成网页内容的基础单位，元素由起始标签、内容和结束标签构成，如：

\begin{lstlisting}
<h1>一级标题</h1>
\end{lstlisting}

其中<h1>是h1元素的起始标签，标签以“<”开始，以“>”结束，</h1>是结束标签，结束标签中含有“/”，位于起始标签和结束标签之间的“一级标题”是h1元素标记的内容。

元素可以嵌套，比如在段落p中插入图片img。这时，img元素作为整体构成段落元素p的内容。

\begin{lstlisting}
<p>
  <img src="http://img1.gtimg.com/63530531.jpg" />
</p>
\end{lstlisting}

\begin{myremark}{自闭和元素}
并非所有元素都包含起始标签和结束标签。如上例中，img元素就只有一个起始标签，没有结束标签，这一类元素被称为自闭和元素。除img元素之外，常见的自闭和元素还有：<br>、<embed>、<hr>、<input>、<link>、<meta>、<source>、<wbr>。
\end{myremark}

\subsection{属性及属性值}

属性（Attributes）及其值（Values）对于某些元素而言是必不可少的，比如新闻网页中经常使用图片来传递信息，图片在HTML中使用img元素来标记，但必须使用相应的属性及其值，告诉浏览器图片存放的位置、图片的大小等信息，其中图片存放的位置用src属性来表示，而图片的大小用width和height属性来表示，属性的值为字符串。如：

\begin{lstlisting}
<img src="63530531.jpg" alt="一周图片精选">
\end{lstlisting}

上例中，img元素拥有src属性，表示图片来源，src属性的值为63530531.jpg,表示图片存放的具体位置。

以下属性是全局属性，即几乎所有HTML元素都支持的属性：
\begin{description}
  \item [accesskey] 为元素指定快捷键
  \item [class] 为元素指定类型
  \item [contenteditable] 指定元素内容的可编辑性
  \item [dir] 指定元素内容的文字方向
  \item [hidden] 指定元素的可见性
  \item [id] 为元素指定唯一名称
  \item [lang] 指定元素内容的语言
  \item [spellcheck] 为元素指定拼写检查
  \item [style] 为元素指定样式
  \item [tabindex] 为元素指定tab顺序
  \item [title] 为元素指定提示文字
  \item [translate] 为元素内容提供指定语言的翻译内容
\end{description}
